import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import 'uno.css'
import '@unocss/reset/tailwind.css'
import './style.css'
// 引入iconfont symbol
import './assets/iconfont/iconfont.js'
// 引入SvgIcon组件
import SvgIcon from './components/SvgIcon.vue'
// 引入CircleProgress组件
import CircleProgress from './components/common/CircleProgress.vue'

// 自定义滚动条行为
document.addEventListener('DOMContentLoaded', () => {
  let scrollingTimer
  
  // 监听滚动事件
  document.addEventListener('scroll', function(e) {
    // 找到正在滚动的元素
    const scrollingElement = e.target.nodeType === Node.ELEMENT_NODE ? e.target : document.scrollingElement
    
    // 添加scrolling类
    scrollingElement.classList.add('scrolling')
    
    // 清除之前的定时器
    clearTimeout(scrollingTimer)
    
    // 设置新的定时器，滚动停止后移除scrolling类
    scrollingTimer = setTimeout(() => {
      scrollingElement.classList.remove('scrolling')
    }, 1000) // 滚动停止1秒后隐藏滚动条
  }, true) // 使用捕获模式
})

// 设置Element Plus的主题色变量
document.documentElement.style.setProperty('--el-color-primary', '#1C1D29')
document.documentElement.style.setProperty('--el-color-primary-light-3', '#2d2e3d')
document.documentElement.style.setProperty('--el-color-primary-light-5', '#4d4e5c')
document.documentElement.style.setProperty('--el-color-primary-light-7', '#8a8b95')
document.documentElement.style.setProperty('--el-color-primary-light-8', '#a9a9b1')
document.documentElement.style.setProperty('--el-color-primary-light-9', '#d8d8db')
document.documentElement.style.setProperty('--el-color-primary-dark-2', '#16171f')
document.documentElement.style.setProperty('--el-input-text-color', '#1C1D29')
document.documentElement.style.setProperty('--el-text-color-regular', '#1C1D29')
document.documentElement.style.setProperty('--el-dialog-border-radius', '12px')
document.documentElement.style.setProperty('--el-dialog-padding-primary', '24px')
document.documentElement.style.setProperty('--el-border-radius-base', '8px')

// 设置按钮禁用颜色
document.documentElement.style.setProperty('--el-button-disabled-bg-color', '#A2A6B8')
document.documentElement.style.setProperty('--el-button-disabled-border-color', '#A2A6B8')

// 设置按钮hover状态的背景色
document.documentElement.style.setProperty('--el-button-hover-bg-color', '#3E4052')
document.documentElement.style.setProperty('--el-button-hover-border-color', '#3E4052')

// 根据环境变量决定是否加载mock数据
if (__USE_MOCK__ === 'true') {
  console.log('启用Mock数据')
  import('./mock')
}

// 配置dayjs使用中文
dayjs.locale('zh-cn')

// 创建应用实例
const app = createApp(App)

// 注册全局组件
app.component('SvgIcon', SvgIcon)
app.component('CircleProgress', CircleProgress)

// 使用插件
app.use(createPinia())
app.use(router)
app.use(ElementPlus, {
  locale: zhCn
})

// 挂载应用
app.mount('#app')
